<template>
  <div class="avatar-edit">
    <!-- 左侧菜单 -->
    <van-sidebar v-model="menuActive" @change="menuChange">
      <van-sidebar-item
        v-for="(item, index) in menu"
        :key="index"
        :disabled="item['disabled']"
        :class="{ 'sidebar-group': item.mt === 'm' }"
        v-show="item.mt === 'm' || item.mt === menuType">
        <template #title>
          <van-icon 
            :name="item.rt === menuData.mt ? 'arrow-down' : 'arrow'"
            v-if="item.mt === 'm'" />
          {{ i18n('res-' + item.rt) }}
        </template>
      </van-sidebar-item>
    </van-sidebar>
    <!-- 右侧列表 -->
    <van-list>
      <!-- 驾驶员基础选项 -->
      <div v-if="menuData.rt === 'bd'">
        <van-cell :title="i18n('race', 'upperFirst')">
          <template #label>
            <van-radio-group v-model="race" direction="horizontal">
              <van-radio name="andras">{{ i18n('andras', 'upperFirst') }}</van-radio>
              <van-radio name="silva">{{ i18n('silva', 'upperFirst') }}</van-radio>
              <van-radio name="talli">{{ i18n('talli', 'upperFirst') }}</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
        <van-cell :title="i18n('skin', 'upperFirst')">
          <template #label>
            <van-radio-group v-model="skin" direction="horizontal">
              <van-radio name="yellow">{{ i18n('skin1', 'upperFirst') }}</van-radio>
              <van-radio name="white">{{ i18n('skin2', 'upperFirst') }}</van-radio>
              <van-radio name="brown">{{ i18n('skin3', 'upperFirst') }}</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
      </div>
      <!-- 其余情况拉出列表 -->
      <div v-else v-for="(code, index) in itemCodeList" :key="index" @click="itemSelect(code)"
        class="item" :class="{ 'item-selected': code === itemCodeSelected , 'newline': code.includes('|')}">
        <div v-if="!code.includes('|')">
          <van-image width="36" height="36" radius="3" fit="none"
            :src="$store.getters.resIconUrl(code)" :alt="code"
          >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:default>
            </template>
          </van-image>
          <span>{{ code }}</span>
        </div>
      </div>
    </van-list>
    <!-- 素材预览弹出层 -->
    <van-popup v-model:show="rawPopup" position="center" closeable>
      <van-image fit="contain" :src="$store.getters.resPngUrl(itemCodeSelected)" :alt="itemCodeSelected">
        <template v-slot:loading> <van-loading type="spinner" size="20" /> </template>
      </van-image>
    </van-popup>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      menuType: "a", // p a s t
      menuActive: 0,
      menu: [
        { rt: "p", mt: "m" },
        { rt: "bd", mt: "p" },
        { rt: "fc", mt: "p" },
        { rt: "hr", mt: "p" },
        { rt: "cp", mt: "p" },
        { rt: "cl", mt: "p" },
        { rt: "wp", mt: "p" },
        { rt: "fa", mt: "p" },
        { rt: "a", mt: "m" },
        { rt: "dfA", mt: "a" },
        { rt: "doA", mt: "a" },
        { rt: "amA", mt: "a" },
        { rt: "dcA", mt: "a" },
        { rt: "lpA", mt: "a" },
        { rt: "ppA", mt: "a" },
        { rt: "rhA", mt: "a" },
        { rt: "lhA", mt: "a" },
        { rt: "s", mt: "m" },
        { rt: "dfS", mt: "s" },
        { rt: "doS", mt: "s" },
        { rt: "amS", mt: "s" },
        { rt: "dcS", mt: "s" },
        { rt: "lpS", mt: "s" },
        { rt: "ppS", mt: "s" },
        { rt: "rhS", mt: "s" },
        { rt: "lhS", mt: "s" },
        { rt: "t", mt: "m" },
        { rt: "dfT", mt: "t" },
        { rt: "doT", mt: "t" },
        { rt: "amT", mt: "t" },
        { rt: "dcT", mt: "t" },
        { rt: "lpT", mt: "t" },
        { rt: "ppT", mt: "t" },
        { rt: "rhT", mt: "t" },
        { rt: "lhT", mt: "t" },
      ],
      list: [],
      rawPopup: false, // 原始素材弹出层的状态
    };
  },
  computed: {
    race: {
      get() { return this.$store.state.pilot.race; },
      set(value) { this.$store.dispatch('setPilotRace', value); }
    },
    skin: {
      get() { return this.$store.state.pilot.skin; },
      set(value) { this.$store.dispatch('setPilotSkin', value); }
    },
    /** 获取选定的菜单数据对象 */
    menuData() {
      return this.menu[this.menuActive];
    },
    /** 获取当前Item编码列表 */
    itemCodeList() {
      //return Tenvi.res[this.menuData.rt];
      let result = [];
      let list = Tenvi.res[this.menuData.rt] || [];
      let mode = this.$store.state.option.avatarListMode;
      // 过滤分割字符
      if (mode === 'none' || mode === 'asc') {
        list.map(item => {
          if (!item.includes('|')) result.push(item);
        });
      }
      if (mode === 'none') return result;
      else if (mode === 'asc') return result.sort();
      else if (mode === 'group') return list;
    },
    /** 获取当前选中Item的编码 */
    itemCodeSelected() {
      return this.$store.state.res[this.menuData.rt].code;
    }
  },
  mounted() {
    this.menuChange(this.menuActive); // 初始化菜单选项
    this.$store.dispatch('reloadRes');
    console.log("$store.state", this.$store.state);
  },
  methods: {
    /** 获取多语言文本 */
    i18n(key, upperFirst) {
      let result = this.$store.getters.i18n(key);
      return upperFirst ? _.upperFirst(result) : result;
    },
    /** 菜单变更 */
    menuChange(index) {
      // 一级菜单逻辑
      if (this.menu[index].mt === 'm') {
        this.menuType = this.menu[index].rt;
        this.menuActive++;
        return;
      }
    },
    /** 素材Item选取 */
    itemSelect(code, type) {
      this.$store.dispatch('setRes', { key: type || this.menuData.rt, code: code })
        .then((e) => {
          //console.log('itemSelect:', e);
          let mode = this.$store.state.option.avatarSelectionTips;
          if (mode === 'raw') this.rawPopup = true;
          if (mode === 'preview') vant.Toast(code);
        });
    }
  },
};
</script>
